<script lang="ts" setup>
import { ref,reactive,defineComponent } from 'vue'
import { ElMessageBox } from 'element-plus'
import { Search,Document, Location, Setting} from '@element-plus/icons-vue'

const form = reactive({
  name: '',
  address: '',
  telephone:''
})
const input1 = ref('')
const input2 = ref('')
const select = ref('')
const handleClick = () => {
  console.log('click')
}

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('Are you sure to close this dialog?')
      .then(() => {
        done()
      })
      .catch(() => {
        // catch error
      })
}

const tableData = [
  {
    time: '2021-01-01',
    water: '100',
    electrical: '100',
    water_price: '100',
    electrical_price: '100',
    total: '200',
    pay_status: '是',
    pay_time: '2021-01-01',
  },
  {
    time: '2021-01-01',
    water: '100',
    electrical: '100',
    water_price: '100',
    electrical_price: '100',
    total: '200',
    pay_status: '是',
    pay_time: '2021-01-01',
  },
  {
    time: '2021-01-01',
    water: '100',
    electrical: '100',
    water_price: '100',
    electrical_price: '100',
    total: '200',
    pay_status: '是',
    pay_time: '2021-01-01',
  },

]
</script>

<script lang="ts">
export default defineComponent({
  components: {Location, Document, Setting}
})
</script>




<template>
  <el-main>
  <div class="mt-4">
    <el-row>
      <el-col :span="12">
        <el-input
            v-model="input2"
            style="max-width: 600px"
            placeholder="Please input"
        >
          <template #append>
            <el-button :icon="Search">搜索</el-button>
          </template>
        </el-input>
      </el-col>
    </el-row>
    <el-row justify="end">
      <el-button type="danger">删除</el-button>
    </el-row>
  </div>
  <el-table :data="tableData" style="width: 100%" border>
    <el-table-column type="selection" width="55" />
    <el-table-column prop="time" label="账单时间" width="180" />a
    <el-table-column prop="water" label="用水量" width="100" />
    <el-table-column prop="water_price" label="水费" width="100" />
    <el-table-column prop="electrical" label="用电量" width="100" />
    <el-table-column prop="electrical_price" label="电费" width="100" />
    <el-table-column prop="total" label="账单金额" width="100" />
    <el-table-column prop="pay_status" label="是否缴费" width="100" />
    <el-table-column prop="pay_time" label="缴费时间" width="180" />
  </el-table>
  <el-row justify="center">
    <el-pagination background layout="prev, pager, next" :total="1000" />
  </el-row>
  </el-main>

</template>

<style scoped>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
</style>